<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="icon" href="../../static/common/img/favicon.ico" th:href="@{/common/img/favicon.ico}">
    <!--<link rel="stylesheet" href="../../static/common/js/element-2/element.css" th:href="@{/common/js/element-2/element.css}">-->
    <link rel="stylesheet" href="../../static/common/js/element-2/index.css" th:href="@{/common/js/element-2/index.css}">
    <style>
        .el-upload--picture-card {
            background-color: transparent;
        }
        .avatar-uploader {
            border: 1px dashed #c0ccda;
            border-radius: 6px;
            box-sizing: border-box;
            width: 148px;
            height: 148px;
            line-height: 146px;
            vertical-align: top;
        }
        .el-progress-circle{
            margin-top:-20px;
        }
        .el-dialog__header{
            background-color: #409EFF;
        }
                 .el-dialog__close{
                     color:white !important;
                 }
        .avatar {
            width: 148px;
            height: 148px;
            display: block;
        }
    </style>
</head>
<body>
<div id="showVideoList">
    <el-container>
        <!--<el-header style="height: auto">-->
   <!---->
        <!--</el-header>-->
        <el-main style="text-align: center; font-size: 12px">
            <div style="height: 130px;width:100%;border:1px solid rgba(56,166,255,.1);box-shadow: 0 0 8px #ccc;background-color: white;margin-top: -10px">
                <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <div class="demo-input-suffix" style="margin-top: 20px;float: left;padding-left: 10px;">
                        <span style="font-size: 18px">名称：</span>
                        <el-input style="width: 130px;"
                                  placeholder="请输入视频名称"
                                  v-model="ruleForm.name" @keyup.enter.native="onEnterSearch">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                        <span style="font-size: 18px;margin-left: 15px;">类别：</span>
                        <el-select v-model="ruleForm.type" placeholder="请选择类别" style="width: 130px;" >
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                        <span style="font-size: 18px;margin-left: 15px;"> 状态：</span>
                        <el-select v-model="ruleForm.status" placeholder="请选择状态" style="width: 130px;">
                            <el-option
                                    v-for="item in status"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                        <span style="font-size: 18px;margin-left: 15px;"> 开始日期：</span>
                        <el-date-picker
                                v-model="ruleForm.startTime"
                                type="date"
                                placeholder="选择日期" style="width: 135px;">
                        </el-date-picker>
                        <span style="font-size: 18px;margin-left: 15px;"> 结束日期：</span>
                        <el-date-picker
                                v-model="ruleForm.endTime"
                                type="date"
                                placeholder="选择日期" style="width: 135px;">
                        </el-date-picker>
                    </div>
                    <div class="demo-input-suffix" style="margin-top: 20px;float: left;padding-left: 400px;">
                        <el-button type="primary" icon="el-icon-search" @click="submitForm('ruleForm')">查询</el-button>
                        <el-button icon="el-icon-search" @click="resetForm('ruleForm')">重置</el-button>
                        <el-button type="primary" @click="spxzVisible = true;return" >添加视频</el-button>
                    </div>
                </el-form>
                <el-dialog
                        title="添加视频"
                        :visible.sync="spxzVisible"
                        v-loading="loading"
                        element-loading-text="拼命上传中"
                        element-loading-spinner="el-icon-loading"
                        element-loading-background="rgba(0, 0, 0, 0.8)"
                        >
                    <el-form ref="formData" :model="formData" :rules="rules" enctype="multipart/form-data">
                        <el-form-item label="视频名称" label-width="80px" style="width: 300px" prop="videoName">
                            <el-input v-model="formData.videoName"></el-input>
                        </el-form-item>
                        <el-form-item label="视频封面" label-width="80px" class="upload-img" prop="file">
                            <!--:style="{backgroundImage:'url(' + dialogImageUrl + ')', backgroundRepeat:'no-repeat', backgroundPosition:'center center', backgroundSize: 'contain'}"-->
                            <el-upload
                                    action="#"
                                    ref="uploadImg"
                                    :before-upload="beforeupload"
                                    :show-file-list="false"
                                    :on-change="handlePictureCardPreview"
                                    accept="image/png,image/gif,image/jpg,image/jpeg"
                                    list-type="picture-card"
                                    :limit="1"
                                    :on-exceed="handleExceed"
                                    style="margin-right: 390px"
                                    >
                                <i v-show="!dialogImageUrl" class="el-icon-plus"></i>
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            </el-upload>
                            <!--查看大图-->
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>
                        </el-form-item>
                        <el-form-item label="视频上传" prop="video" label-width="80px" style="position: absolute;top: 145px;left: 320px;">
                            <el-upload
                                    class="el-upload-text"
                                    action="#"
                                    :on-preview="handlePreview"
                                    :before-remove="beforeRemove"
                                    :limit="1"
                                    :on-exceed="handleExceed"
                                    accept="video/mp4, video/ogg, video/flv,video/avi,video/wmv,video/rmvb"
                                    :show-file-list = "showFileFlag"
                                    :file-list="fileList"
                                    :on-change = "loadVideo"
                                    :auto-upload="false">
                                <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="类别" label-width="80px" prop="videoType" style="width: 300px;position: absolute;top: 84px;left: 320px;">
                            <el-select v-model="formData.videoType" placeholder="请选择">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="视频时长" prop="videoDuration" label-width="80px"  style="width: 300px">
                            <el-input v-model="formData.videoDuration"></el-input>
                        </el-form-item>
                        <el-form-item label="状态" prop="videoStatus" label-width="80px"  style="width: 300px; position: absolute;top: 317px;left: 320px;">
                            <el-tooltip :content="'视频状态: ' + formData.videoStatus" placement="top">
                                <el-switch v-model="formData.videoStatus"  active-color="#13ce66"
                                           inactive-color="#ff4949" active-value="启用"
                                           inactive-value="禁用" style="margin-right: 300px;"></el-switch>
                            </el-tooltip>
                        </el-form-item>
                        <el-form-item label="视频介绍" prop="videoJj" label-width="80px">
                            <el-input type="textarea" v-model="formData.videoJj"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit('formData')" >立即添加</el-button>
                            <el-button @click="spxzVisible = false">取消</el-button>
                            <div v-loading="fileLoading" style="background: #fff;" element-loading-text="上传中..."></div>
                        </el-form-item>
                    </el-form>
                </el-dialog>
            </div>

            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column label="视频名称" width="180">
                        <template slot-scope="scope">
                            <span>{{ scope.row.videoName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="视频简介" width="180">
                        <template slot-scope="scope">
                            <span>{{ scope.row.videoJj }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="类别" width="80">
                        <template slot-scope="scope">
                            <span>{{ scope.row.videoType }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="观看次数" width="80">
                        <template slot-scope="scope">
                            <span>{{ scope.row.videoWatchTimes }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="下载次数" width="80">
                        <template slot-scope="scope">
                            <span>{{ scope.row.videoDownloadTimes }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="时长" width="80">
                        <template slot-scope="scope">
                            <span>{{ scope.row.VideoDuration }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" width="80">
                        <template slot-scope="scope" v-if="scope.row.status=='在用'">
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.VideoStatus }}</el-tag>
                            </div>
                        </template>
                        <template slot-scope="scope" v-else>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.VideoStatus }}</el-tag>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="上传者"
                            width=" 80">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top">
                                <p>姓名: {{ scope.row.videoCreateUserId }}</p>
                                <!--<p>住址: {{ scope.row.address }}</p>-->
                                <div slot="reference" class="name-wrapper">
                                    <el-tag size="medium">{{ scope.row.videoCreateUserId }}</el-tag>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="上传日期"
                            width="150">
                        <template slot-scope="scope">
                            <i class="el-icon-timer"></i>
                            <span>{{ scope.row.videoCreateDate }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <div>
                <el-pagination v-if="tableData.length>0" background align="center" :pager-count="5" @size-change="handleSizeChange"
                               @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 50]" :page-size="pageSize" layout="total,sizes, prev, pager, next, jumper"
                               :total="total">
                </el-pagination>
            </div>
        </el-main>
    </el-container>
</div>
</body>
<script src="/static/common/js/vue/vue.js" th:src="@{/common/js/vue/vue.js}" type="text/javascript" ></script>
<script src="/static/common/js/element-2/index.js" th:src="@{/common/js/element-2/index.js}"></script>
<!--<script src="/static/common/js/element-2/element.js" th:src="@{/common/js/element-2/element.js}"></script>-->
<script src="/static/common/js/jquery/jquery.min.js" th:src="@{/common/js/jquery/jquery.min.js}"></script>
<script src="/static/common/js/common/common.js" th:src="@{/common/js/common/common.js}"></script>
<script src="/static/back/showVideoList.js" th:src="@{/back/showVideoList.js}"></script>
</html>